<template>
    <div class="indexym">

        <div class="topindex">
            <div class="leftindex">
                <div class="toplist">
                    <div style="margin: 20px 0px; display: flex;">
                        <div @click="check(index)" v-for="(item, index) in cat" class="category-item"
                            :class="cur == index ? 'category-item-active' : ''">{{ item.dictLabel }}</div>

                    </div>
                    <div v-if="newslist.length > 0 && cur == 0">
                        <el-card class="list1" v-for="item in newslist" @click="tode1(item, 4)">
                            <div class="listimg" @click="tode1(item, 4)"> <img :src="item.cover" alt=""></div>
                            <div class="listcontent">
                                <div class="listtitle">{{ item.courseName }}</div>
                                <div class="listcontent1">{{ item.createBy }}</div>
                                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
                            </div>
                        </el-card>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange"
                                :current-page="queryform.current" :page-sizes="[5, 10, 20]"
                                :page-size="queryform.pageSize" layout="total, prev, pager, next" :total="total">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-if="newslist.length > 0 && cur == 2">
                        <el-card class="list1" v-for="item in newslist" @click="tode2(item, 4)">
                            <div class="listimg" @click="tode2(item, 4)"> <img :src="item.cover" alt=""></div>
                            <div class="listcontent">
                                <div class="listtitle">{{ item.projectName }}</div>
                                <div class="listcontent1">{{ item.createBy }}</div>
                                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
                            </div>
                        </el-card>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange"
                                :current-page="queryform.current" :page-sizes="[5, 10, 20]"
                                :page-size="queryform.pageSize" layout="total, prev, pager, next" :total="total">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-if="newslist.length > 0 && cur == 1">
                        <el-card class="list1" v-for="item in newslist" @click="tode11(item, 4)">
                            <div class="listimg" @click="tode11(item, 4)"> <img :src="item.cover" alt=""></div>
                            <div class="listcontent">
                                <div class="listtitle">{{ item.paperTitle }}</div>
                                <div class="listcontent1">{{ item.createBy }}</div>
                                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
                            </div>
                        </el-card>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange"
                                :current-page="queryform.current" :page-sizes="[5, 10, 20]"
                                :page-size="queryform.pageSize" layout="total, prev, pager, next" :total="total">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-if="newslist.length > 0 && cur == 3">
                        <el-card class="list1" v-for="item in newslist" @click="tode3(item, 4)">
                            <div class="listimg" @click="tode3(item, 4)"> <img :src="item.cover" alt=""></div>
                            <div class="listcontent">
                                <div class="listtitle">{{ item.rewardName }}</div>
                                <div class="listcontent1">{{ item.createBy }}</div>
                                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
                            </div>
                        </el-card>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange"
                                :current-page="queryform.current" :page-sizes="[5, 10, 20]"
                                :page-size="queryform.pageSize" layout="total, prev, pager, next" :total="total">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-if="newslist.length > 0 && cur == 4">
                        <el-card class="list1" v-for="item in newslist" @click="tode(item, 4)">
                            <div class="listimg" @click="tode(item, 4)"> <img :src="item.cover" alt=""></div>
                            <div class="listcontent">
                                <div class="listtitle">{{ item.patentTitle }}</div>
                                <div class="listcontent1">{{ item.createBy }}</div>
                                <div class="time"><i class="el-icon-time"></i> {{ item.createTime }}</div>
                            </div>
                        </el-card>
                        <div class="pagination">
                            <el-pagination background @current-change="handleCurrentChange"
                                :current-page="queryform.current" :page-sizes="[5, 10, 20]"
                                :page-size="queryform.pageSize" layout="total, prev, pager, next" :total="total">
                            </el-pagination>
                        </div>
                    </div>
                    <div v-else>
                        <el-empty></el-empty>
                    </div>
                </div>
            </div>
            <div class="rightindex">
                <div class="" style="color: #333333; font-size: 30px;font-weight: bold;margin-bottom: 20px;">动态</div>
                <div class="toplist">
                    <div v-for="item in newslist1"
                        style="display: flex;justify-content: space-between;margin-bottom: 20px;padding-right: 20px;box-sizing: border-box;"
                        @click="tode3(item.id)">
                        <div class="name" style="width: 50%;overflow: hidden;text-overflow: ellipsis;cursor: pointer;">
                            {{ item.title }}</div>
                        <div class="" style="color: #ccc;">{{ item.createTime }}</div>
                    </div>

                    <div class="pagination">
                        <el-pagination background @current-change="handleCurrentChange2"
                            :current-page="queryform2.current" :page-sizes="[5, 10, 20]"
                            :page-size="queryform2.pageSize" layout="total, prev, pager, next" :total="total2">
                        </el-pagination>
                    </div>
                </div>
            </div>


        </div>
    </div>
</template>
<style scoped>
.hotlabel {
    margin: 20px 0px 20px 0px;
    height: 30px;
    background-color: rgb(241, 111, 68);
    font-size: 18px;
    color: white;
    width: 130px;
    font-weight: bold;
    line-height: 30px;
    text-align: center;
    border-radius: 20px
}
</style>
<script>
import service from '@/utils/request';
import * as echarts from "echarts";
export default {
    data() {
        return {
            cur: 0,
            total2: 0,
            curr: 0,
            banner: [],
            queryform: {
                current: 1,
                pageSize: 10
            },
            queryform2: {
                current: 1,
                pageSize: 10
            },
            newslist1: [],
            videourl: "",
            queryform1: {
                current: 1,
                pageSize: 10
            },
            list2: [{
                id: 1,
                name: "团队协作，合作共赢"
            }],
            newslist: [],
            newslist1: [],
            cat: [],
            list: [],
            total: 0,
            videolist: [],
            pages: 0
        }
    },
    mounted() {

        this.getcatelist()
        // this.getdata()
        this.getnew("/achievement/courseTeaching/page")

        this.getlist1()

    },
    methods: {
        tode3(id) {
            this.$router.push({
                path: "/teacher/detail3?id=" + id
            })

        },
        handleCurrentChange2(e) {
            this.queryform2.current = e;
            this.getilst1()
        },
        async getlist1() {
            this.queryform2.type = 1;
            const res = await service.get("/notice/page", { params: this.queryform2 });
            console.log(res);
            if (res.code == 200) {
                this.newslist1 = res.data.records;
                this.total2 = res.data.total;
            }
        },
        async getdata() {

            const myChart = echarts.init(document.getElementById("main1"));// 图标初始化
            myChart.clear()
            const res = await service.get("/index/my");
            console.log(res);

            const option = {
                title: {
                    text: "各类论文数量"
                },
                tooltip: {
                    trigger: "item"
                },
                xAxis: {
                    type: 'category',
                    data: res.data.xdata
                },
                yAxis: {
                    name: "数量",
                    type: 'value'
                },
                series: [
                    {
                        data: res.data.ydata,
                        type: 'bar'
                    }
                ]

            };

            myChart.setOption(option);// 渲染页面
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });

        },
        tode(item, b) {

            this.$router.push({
                path: `/teacher/zldetail?id=` + item.id
            })
        },
        tode1(item, b) {

            this.$router.push({
                path: `/teacher/kcjxdetail?id=` + item.id
            })
        },
        tode11(item, b) {

this.$router.push({
    path: `/teacher/lwdetail?id=` + item.id
})
},
        tode2(item){
            this.$router.push({
                path: `/teacher/kyxmdetail?id=` + item.id
            })
        },
        tode3(item){
            this.$router.push({
                path: `/teacher/jxjldetail?id=` + item.id
            })

        },
        djvideo(index) {
            this.curr = index;
            this.videourl = this.videolist[this.curr].file
        },

        changeone() {
            if (this.queryform1.current < this.pages) {
                this.queryform1.current++
            } else {
                this.queryform1.current = 1
            }

        },

        async getnew(a) {
            if (this.cur == 0) {
                delete this.queryform.type
            } else {
                this.queryform.type = this.cat[this.cur].dictValue
            }
            const res = await service.get(a, {
                params: this.queryform
            });

            this.newslist = res.data.records
            this.total = res.data.total


        },
        handleCurrentChange(e) {
            this.queryform.current = e;
            if (this.cur == 4) {
                this.getnew("/achievement/patentApplication/page")
            }
            if (this.cur == 0) {
                this.getnew("/achievement/courseTeaching/page")
            }
            if (this.cur == 2) {
                this.getnew("/achievement/researchProjects/page")
            }
            if (this.cur == 3) {
                this.getnew("/achievement/teachingRewards/page")
            }
            if (this.cur == 1) {
                this.getnew("/achievement/academicPapers/page")
            }
        },
        async getcatelist() {

            const res = await service.get("/sys/dict/data/list?dictType=achievement_type");
            // this.cat = [{
            //     dictLabel: "全部",
            //     dictValue: ""
            // }];
            res.data.forEach(el => {
                this.cat.push({
                    dictLabel: el.dictLabel,
                    dictValue: el.dictValue
                })
            });
            // this.cat=res.data

        },
        check(index) {
            this.cur = index
            if (this.cur == 4) {
                this.getnew("/achievement/patentApplication/page")
            }
            if (this.cur == 0) {
                this.getnew("/achievement/courseTeaching/page")
            }
            if (this.cur == 2) {
                this.getnew("/achievement/researchProjects/page")
            }
            if (this.cur == 3) {
                this.getnew("/achievement/teachingRewards/page")
            }
            if (this.cur == 1) {
                this.getnew("/achievement/academicPapers/page")
            }
            console.log(this.queryform.type)

        },
        getzhunali() {

        },
        async getbanner() {
            const res = await service.get("/banner/list");

            this.banner = res.data
        }
    }
}
</script>
<style scoped>
.listcontent {
    padding-left: 10px;
    box-sizing: border-box;
    width: calc(100% - 150px);
}

.ac {
    color: #64c5b1;
    ;
}

.listcontent1 {
    overflow: hidden;
    margin-top: 10px;
    color: rgb(102, 102, 102);
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.listimg img {
    width: 100%;
    height: 100%;
}

.listimg {
    width: 150px;
    height: 100px;
}

.listtitle {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list1 {
    width: 100%;
    background-color: 'rgba(255, 255, 255, 0.5)';
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.toplist {
    width: 100%;
    overflow: hidden;
}

.leftindex {
    width: 50%;
    height: auto;
    float: left;
}

.rightindex {
    width: 40%;
    padding-left: 20px;
    box-sizing: border-box;
    float: right;
}

.righttop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.indexym {
    width: 80%;

    margin: 0 auto;
}

.topindex {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.category-item {

    border: 1px solid #64c5b1;
    color: #64c5b1;
    padding: 5px 7px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-right: 10px;
    cursor: pointer;
}

.category-item-active {
    background-color: #64c5b1;
    color: #fff;
}

.newsitem {
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
}

.content {
    margin-top: 20px;
}
</style>
<style>
.list1 .el-card__body {
    display: flex;
    padding: 0px;


    justify-content: space-between;

}

.time {
    margin-top: 10px;
    color: rgb(102, 102, 102);
}
</style>